<!-- 资金明细 -->
<template>
  <view class="card-wrapper color-333 font-28">
    <view class="card" v-if="cardTYpe === 0">
      <view class="card-head">
        <view class="text-c pb-10"> {{ info.remark }} </view>
        <view class="font-bold font-48 text-c"
          >{{ number > 0 ? "+" : "" }}{{ number }}
        </view>
      </view>
      <view class="card-body">
        <view class="item flex item2">
          <view class="item-left2">订单归属状态：</view>
          <view class="item-steps flex-1">
            <!-- <u-steps
              :list="crashStatus"
              :one-of-icon="endIcon"
              direction="column"
              active-color="#41CB05"
              un-active-color="#D0D0D0"
              active-text-color="#333"
              un-active--text-color="#333"
              :current="currentStatus"
            ></u-steps> -->
            <i-step
              :list="crashStatus"
              :iconName="iconName"
              :iconColor="iconColor"
              :current="currentStatus"
            ></i-step>
          </view>
        </view>
        <view class="item flex">
          <view class="item-left">当前状态</view>
          <view>{{ info.payType ? "支付成功" : "支付失败" }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">商品</view>
          <view>{{ info.productName }}</view>
        </view>
        <view class="item flex" v-if="info.machine">
          <view class="item-left">商户全称</view>
          <view>{{ info.storeName }}</view>
        </view>
        <view class="item flex" v-if="info.machine">
          <view class="item-left">洗车机</view>
          <view>{{ info.machine }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">支付时间</view>
          <view>{{ dateFormat(info.time) }}</view>
        </view>
        <view class="item flex" v-if="info.payType">
          <view class="item-left">支付方式</view>
          <view>{{ info.payType }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">购买渠道</view>
          <view>{{ info.machine ? "线下" : "线上" }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">交易单号</view>
          <view>{{ info.orderNo }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">客户账号</view>
          <view>{{ info.clientPhone }}</view>
        </view>
        <view class="item flex" v-if="info.machine">
          <view class="item-left">站点</view>
          <view>{{ info.stationName }}</view>
        </view>
      </view>
    </view>
    <view class="card" v-else-if="cardTYpe === 1">
      <view class="card-head">
        <view class="text-c pb-10"> {{ info.remark }} </view>
        <view class="font-bold font-48 text-c"
          >{{ number > 0 ? "+" : "" }}{{ number }}
        </view>
      </view>
      <view class="card-body">
        <view class="item flex">
          <view class="item-left">当前状态</view>
          <view>核销成功</view>
        </view>
        <view class="item flex">
          <view class="item-left">商品</view>
          <view>{{ info.productName }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">核销商户</view>
          <view>{{ info.storeName }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">核销洗车机</view>
          <view>{{ info.machine }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">核销时间</view>
          <view>{{ dateFormat(info.time) }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">核销单号</view>
          <view>{{ info.orderNo }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">客户账号</view>
          <view>{{ info.clientPhone }}</view>
        </view>
      </view>
    </view>
    <view class="card" v-else-if="cardTYpe === 2">
      <view class="card-head">
        <view class="text-c pb-10"
          >余额提现到—{{ info.withDraw.bankName }}（{{
            info.withDraw.cardAfter4
          }}）
        </view>
        <view class="font-bold font-48 text-c">
          -{{ info.withDraw.money }}
        </view>
      </view>
      <view class="card-body">
        <view class="item flex item2">
          <view class="item-left">当前状态</view>
          <view class="item-steps flex-1">
            <!-- <u-steps
              :list="crashStatus"
              :one-of-icon="endIcon"
              direction="column"
              active-color="#41CB05"
              un-active-color="#D0D0D0"
              active-text-color="#333"
              un-active--text-color="#333"
              :current="currentStatus"
            ></u-steps> -->
            <i-step
              :list="crashStatus"
              :iconName="iconName"
              :iconColor="iconColor"
              :current="currentStatus"
            ></i-step>
          </view>
        </view>
        <view class="item flex">
          <view class="item-left">提现金额</view>
          <view>￥{{ info.withDraw.money }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">服务费</view>
          <view>￥{{ info.withDraw.serviceFee }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">申请时间</view>
          <view>{{ dateFormat(info.withDraw.sendTime) }}</view>
        </view>
        <view class="item flex" v-if="info.withDraw.status === 240">
          <view class="item-left">到账时间</view>
          <view>{{ dateFormat(info.withDraw.arriveTime) }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">提现银行</view>
          <view>{{ info.withDraw.bankName }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">提现单号</view>
          <view>{{ info.withDraw.withDrawNo }}</view>
        </view>
      </view>
    </view>
    <view class="card" v-else>
      <view class="card-head">
        <view class="text-c pb-10"> {{ info.remark }} </view>
        <view class="font-bold font-48 text-c"
          >{{ number > 0 ? "+" : "" }}{{ number }}
        </view>
      </view>
      <view class="card-body">
        <view class="item flex">
          <view class="item-left">退款记录</view>
          <view v-if="info.status" class="color-F30000">已退款（+46.00）</view>
          <view v-else>退款中</view>
        </view>
        <view class="item flex">
          <view class="item-left">退款时间</view>
          <view>{{ dateFormat(info.time) }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">退款方式</view>
          <view>{{ info.orderNo }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">退款单号</view>
          <view>退款单号</view>
        </view>
        <view class="item flex">
          <view class="item-left">当前状态</view>
          <view v-if="info.status" class="color-F30000">已退款（+46.00）</view>
          <view v-else>退款中</view>
        </view>
        <view class="item flex">
          <view class="item-left">商品</view>
          <view>{{ info.productName }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">商户全称</view>
          <view>{{ info.storeName }}</view>
        </view>

        <view class="item flex">
          <view class="item-left">支付方式</view>
          <view>{{ info.payType }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">交易单号</view>
          <view>{{ info.orderNo }}</view>
        </view>
        <view class="item flex">
          <view class="item-left">客户账号</view>
          <view>{{ info.clientPhone }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { dateFormat } from "@/utils/formatDate.js";
import iStep from "./components/i-step";

export default {
  data() {
    return {
      crashStatus: [
        {
          name: "发起提现",
          subName: "2021-04-30  12：59：59",
          iconName: "",
          percent: "",
        },
        { name: "银行处理中", subName: "", iconName: "", percent: "" },
        {
          name: "到账",
          subName: "2021-04-30  12：59：59",
          iconName: "checkmark-circle-fill",
          percent: "",
        },
      ],
      currentStatus: 0, //当前提现状态
      iconName: "checkmark-circle-fill",
      iconColor: "#41CB05",
      flowTypes: {
        10: {
          name: "首购收益",
          cardTYpe: 0,
        },
        20: {
          name: "复购收益",
          cardTYpe: 0,
        },
        30: {
          name: "流入复购收益",
          cardTYpe: 0,
        },
        40: {
          name: "流出复购收益",
          cardTYpe: 0,
        },
        50: {
          name: "流入核销收益",
          cardTYpe: 1,
        },
        60: { name: "核销", cardTYpe: 1 },
        70: {
          name: "流出核销",
          cardTYpe: 1,
        },
        80: {
          name: "提现",
          cardTYpe: 2,
        },
        90: {
          name: "退款",
          cardTYpe: 3,
        },
        100: {
          name: "佣金",
          cardTYpe: 0,
        },
        110: {
          name: "别处复购收益",
          cardTYpe: 0,
        },
        120: {
          name: "平台抽成",
          cardTYpe: 0,
        },
      },
      cardTYpe: 0,
      info: {},
      number: "0.00", //金额
    };
  },

  onLoad(e) {
    this.getFlowDetail(e.id);
    this.number = Number(e.num);
  },

  methods: {
    dateFormat,
    getFlowDetail(id) {
      this.$api.washCar
        .getFlowDetail({ id: id })
        .then((res) => {
          console.log(res.data.flowType);
          this.info = res.data;
          this.cardTYpe = this.flowTypes[res.data.flowType].cardTYpe;
          //提现
          if (res.data.flowType === 80) {
            //提现状态
            if (res.data.withDraw.status < 220) {
              //100=待审核 200=已通过，待打款
              this.currentStatus = 0;
              this.crashStatus = [
                {
                  name: "发起提现",
                  subName: this.dateFormat(res.data.withDraw.sendTime),
                },
                { name: "银行处理中", subName: "" },
                { name: "到账", subName: "" },
              ];
            } else if (res.data.withDraw.status < 240) {
              //220=已审核，打款中
              this.currentStatus = 1;
              this.crashStatus = [
                {
                  name: "发起提现",
                  subName: this.dateFormat(res.data.withDraw.sendTime),
                },
                { name: "银行处理中", subName: "" },
                { name: "到账", subName: "" },
              ];
            } else if (res.data.withDraw.status < 260) {
              // 240=已审核，已打款
              this.currentStatus = 2;
              this.crashStatus = [
                {
                  name: "发起提现",
                  subName: this.dateFormat(res.data.withDraw.sendTime),
                },
                { name: "银行处理中", subName: "" },
                {
                  name: "到账",
                  subName: this.dateFormat(res.data.withDraw.arriveTime),
                },
              ];
            } else if (res.data.withDraw.status < 300) {
              // 260=已审核，打款失败
              this.currentStatus = 2;
              this.iconName = "close-circle-fill";
              this.iconColor = "#F30000";
              this.crashStatus = [
                {
                  name: "发起提现",
                  subName: this.dateFormat(res.data.withDraw.sendTime),
                },
                { name: "银行处理中", subName: "" },
                { name: "提现失败", subName: "" },
              ];
            } else if (res.data.withDraw.status === 300) {
              //300=审核失败
              this.currentStatus = 1;
              this.iconName = "close-circle-fill";
              this.iconColor = "#F30000";
              this.crashStatus = [
                {
                  name: "发起提现",
                  subName: this.dateFormat(res.data.withDraw.sendTime),
                },
                { name: "审核失败", subName: "" },
              ];
            }
          }
          //基建回本中
          if (res.data.recovery === 1) {
            let percent =
              Math.round(
                (res.data.capital_Recovery_Money /
                  res.data.capital_Target_Money) *
                  10000
              ) / 100.0;
            this.crashStatus = [
              {
                name: "基建回本中",
                subName: percent + "%",
                iconName: "",
                percent: percent,
                number: "+" + rees.data.recovery_Money,
              },
              {
                name: "设备待回本",
                subName: "0%",
                iconName: "",
                percent: "0",
                number: "",
              },
            ];
          }
          //设备回本中
          if (res.data.recovery === 2) {
            let percent =
              Math.round(
                (res.data.capital_Recovery_Money /
                  res.data.capital_Target_Money) *
                  10000
              ) / 100.0;
            this.crashStatus = [
              {
                name: "基建回本",
                subName: "100%",
                iconName: "checkmark-circle-fill",
                percent: 100,
                number: "",
              },
              {
                name: "设备回本中",
                subName: percent + "%",
                iconName: "",
                percent: percent,
                number: "+" + rees.data.recovery_Money,
              },
            ];
          }
        })
        .catch((err) => {
          console.log(err);
          // setTimeout(() => {
          //   uni.navigateBack()
          // }, 2000)
        });
    },
  },

  components: {
    iStep,
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f6f6f6;
}

.card {
  font-weight: 500;
  background: #fff;
  background: #fff;
  margin: 20rpx 24rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  font-weight: 500;

  .card-head {
    padding: 30rpx 0;
    border-bottom: 2rpx solid #eee;

    .pb-10 {
      padding-bottom: 10rpx;
    }
  }

  .card-body {
    line-height: 54rpx;
    padding: 15rpx 0;

    .item {
      .item-left {
        width: 167rpx;
        color: #999;
      }
    }

    .item2 {
      padding-bottom: 50rpx;
      border-bottom: 2rpx solid #eee;

      .item-left2 {
        width: 195rpx;
        color: #999;
      }
    }
  }
}

.font-48 {
  font-size: 48rpx;
}

.text-c {
  text-align: center;
}

.color-F30000 {
  color: #f30000;
}
</style>
